<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<cpn2></cpn2>
		</div>
		
		<script src="../utils/vue.js"></script>
		<script>
			var cc1 = Vue.extend({
				template:`
				<div>
					<p>我是自定义组件</p>
					<p style="color:red">我超级棒</p>
				</div>
				`
			});
			var cc2 = Vue.extend({
				template:`
				<div>
					<p>我是自定义组件2</p>
					<p>我特别棒</p>
					<cpn1></cpn1>
				</div>
				`,
				components:{
					cpn1:cc1 //cpn1是子组件
				}
			});
			
			var vm = new Vue({ //vm相当于顶层组件root
				el:"#app",
				data:{
				},
				components:{
					cpn2:cc2 //cpn2是父组件
				}
			})
		</script>
	</body>
</html>
